<template>
  <div class="c-container">
    <div class="title">{{ title }}</div>
    <el-input
      v-if="isSearch"
      :placeholder="placeholder"
      v-model="inputContent"
      class="sc-container"
      @input="inputChange"
      @keyup.enter.native="searchInput">
      <el-button
        slot="append"
        icon="el-icon-search"
        @click.native="searchInput"/>
    </el-input>
    <div class="right-container">
      <el-button
        v-if="canSave"
        type="primary"
        style="margin-right: 5px" @click="createClick()">{{ mainTitle }}</el-button>
      <el-dropdown
        v-if="moreTypes.length > 0"
        trigger="click"
        @command="handleTypeDrop">
        <flexbox class="right-more-item">
          <div>更多</div>
          <i
            class="el-icon-arrow-down el-icon--right"
            style="color:#777;"/>
        </flexbox>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="(item, index) in moreTypes"
            :key="index"
            :command="item.type">{{ item.name }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <create-view
      v-if="isCreate"
      :kms-type="createKmsType"
      :action="createActionInfo"
      :source-list="sourceList"
      @save-success="createSaveSuccess"
      @hiden-view="hideView"/>
    <kms-import
      :show="showKmsImport"
      :kms-type="kmsType"
      @close="showKmsImport=false"/>
    <kms-export
      :show="showKmsExport"
      :kms-type="kmsType"
      :search="search"
      :scene_id="scene_id"
      :filter-obj="filterObj"
      :export-params="exportParams"
      @close="showKmsExport=false"/>
    <duplicate-check
      v-if="showDuplicateCheck"
      @hiden-view="showDuplicateCheck=false"/>
  </div>
</template>

<script type="text/javascript">
import { mapGetters } from 'vuex'
import KmsCreateView from './KmsCreateView'
import KmsImport from './KmsImport'
import KmsExport from './KmsExport'

export default {
  name: 'KmsListHead', // 客户管理下 重要提醒 回款计划提醒
  components: {
    KmsImport,
    KmsExport,
    'create-view': KmsCreateView
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入内容'
    },
    mainTitle: {
      type: String,
      default: ''
    },
    // Kms类型
    kmsType: {
      type: String,
      default: ''
    },
    search: String,
    scene_id: {
      type: [Number, String],
      default: ''
    },
    filterObj: {
      type: Object,
      default: () => {
        return {}
      }
    },
    isSearch: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      inputContent: '',
      /** 更多操作 */
      moreTypes: [],
      // 创建的相关信息
      createActionInfo: { type: 'save' },
      createKmsType: '',
      isCreate: false, // 是创建
      // 导入
      showKmsImport: false,
      // 导出
      showKmsExport: false,
      // 导出选中参数
      exportParams: {},
      // 查重
      showDuplicateCheck: false,
      sourceList: []
    }
  },
  computed: {
    ...mapGetters(['kms']),
    canSave() {
      return this.kms[this.kmsType].save
    }
  },
  mounted() {
    // 线索和客户判断更多操作
    // if (this.kmsType != 'enter-storage') {
    //   if (this.kms[this.kmsType].excelimport) {
    //     this.moreTypes.push({ type: 'enter', name: '导入' })
    //   }
    //   if (this.kms[this.kmsType].excelexport) {
    //     this.moreTypes.push({ type: 'out', name: '导出' })
    //   }
    // }
  },
  methods: {
    handleTypeDrop(command, params = {}) {
      if (command == 'out') {
        let paramsData = {}
        if (params.__export) {
          paramsData = params
          delete paramsData.__export
        } else {
          paramsData = {}
        }
        this.exportParams = paramsData
        this.showKmsExport = true
      } else if (command == 'enter') {
        this.showKmsImport = true
      }
    },
    createClick(val, data, type) {
      this.createKmsType = this.kmsType
      this.createActionInfo = { type: 'save' }
      this.isCreate = !this.isCreate
      if (val === 'addRelative') {
        this.sourceList = data
        this.createKmsType = type
      } else {
        this.createActionInfo = val
      }
    },
    inputChange() {
      this.$emit('update:search', this.inputContent)
    },
    // 进行搜索操作
    searchInput() {
      this.$emit('on-search', this.inputContent)
    },
    // 创建数据页面 保存成功
    createSaveSuccess(data) {
      if (data && data.saveAndCreate) {
        if (data.type == 'customer') {
          this.createKmsType = 'contacts'
          this.createActionInfo = {
            type: 'relative',
            kmsType: 'customer',
            data: {}
          }
          this.createActionInfo.data['customer'] = data.data
          this.isCreate = true
        }
      } else {
        // 回到保存成功
        this.$emit('on-handle', { type: 'save-success' })
      }
    },
    hideView() {
      this.isCreate = false
    }
  }
}
</script>
<style lang="scss" scoped>
.c-container {
  height: 60px;
  position: relative;
  z-index: 100;
  .title {
    float: left;
    padding: 0 20px;
    font-size: 18px;
    line-height: 60px;
  }
  .sc-container {
    width: 300px;
    margin: -18px 0 0 -150px;
    position: absolute;
    left: 50%;
    top: 50%;
  }

  .right-container {
    margin-right: -10px;
    float: right;
    margin: 12px 20px 0 0;
    position: relative;
    display: inline-flex;
    .right-item {
      float: left;
      margin-right: 10px;
      padding: 8px 10px;
      font-size: 13px;
      border-radius: 2px;
    }

    .right-more-item {
      cursor: pointer;
      border: 1px solid #dcdfe6;
      background-color: white;
      font-size: 13px;
      color: #777;
      padding: 0 12px;
      border-radius: 2px;
      height: 31px;
    }
  }
}
</style>
